<template>
  <div>
    <categorizeIndex />
    <el-card style="margin-top: 20px">
      <el-button
        @click="addSpu"
        type="primary"
        icon="Plus"
        style="margin-bottom: 20px"
        :disabled="disabled"
      >
        添加Spu
      </el-button>
      <el-table border :data="spuData" style="margin-bottom: 20px">
        <el-table-column
          label="序号"
          width="100px"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          label="SPU名称"
          width="150px"
          prop="spuName"
          align="center"
        ></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="addSku">
              添加sku
            </el-button>
            <el-button type="primary" size="small" @click="editData(row)">
              编辑
            </el-button>
            <el-button type="primary" size="small">查看</el-button>
            <el-popconfirm title="确定删除吗" @confirm="deleteData(row)">
              <template #reference>
                <el-button type="warning" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 9]"
        :disabled="false"
        :background="true"
        layout=" prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="getSpu"
        @size-change="changePage"
      />
    </el-card>
    <supCard v-model="drawer" ref="supCardRef" />
    <skuDrawer v-model="drawer2" />
  </div>
</template>

<script setup lang="ts">
import categorizeIndex from '../../../components/Categorize/index.vue'
import { ref, watch, onMounted } from 'vue'
import categorizeStore from '../../../store/modules/categorize'
import { reqSpu, reqDeleteSpu } from '../../../api/product/spu'
import supCard from './component/spuCard.vue'
import skuDrawer from './component/skuCard.vue'
import { SPUArray } from '../../../api/product/spu/type'
import { ElMessage } from 'element-plus'
//
let drawer2 = ref(false)
//获取子组件实例
const supCardRef = ref()
//按钮控制
let disabled = ref<boolean>(true)
//抽屉控制
let drawer = ref<boolean>(false)
//存储spu数据
let spuData = ref<SPUArray>()
//当前页码
let currentPage = ref<number>(1)
//页码数量
let pageSize = ref<number>(5)
//页码总数
let total = ref<number>()
//使用仓库数据
const useCategorizeStore = categorizeStore()
//监听三级id的变化
watch(
  () => useCategorizeStore.infoId3,
  () => {
    if (!useCategorizeStore.infoId3) {
      //表格赋为空
      spuData.value = []
      return
    }
    //获取spu数据
    getSpu()
    //按钮解控
    disabled.value = false
  },
)
//组件挂载
onMounted(() => {
  //清空数据
  useCategorizeStore.$reset()
})
//定义获取spu数据回调
async function getSpu(page = currentPage.value) {
  //发送获取spu请求
  let result = await reqSpu(page, pageSize.value, useCategorizeStore.infoId3)
  //数据赋值给spuData用于展示
  spuData.value = result.data.records
  //赋值页码总数
  total.value = result.data.total
}
//页码改变回调
function changePage() {
  //发请求数据
  getSpu()
}
//添加spu回调
function addSpu() {
  supCardRef.value.initSpu()
  //抽屉显示
  drawer.value = true
}
//编辑回调
function editData(row: any) {
  //调用子组件的方法，并且把该组件的spu数据（不完整）传递给子组件
  supCardRef.value.getFatherSpu(row)
  //抽屉打开
  drawer.value = true
}
//删除数据
async function deleteData(row) {
  //调用接口
  const result = await reqDeleteSpu(row.id)
  if (result.code == 200) {
    getSpu()
    ElMessage.success('删除成功')
  } else {
    ElMessage.error('操作失败')
  }
}
//添加sku
function addSku() {
  drawer2.value = true
}
//父组件对子组件暴露数据
defineExpose({ drawer, getSpu, currentPage, drawer2 })
</script>

<style scoped lang="scss"></style>
